<script type="text/javascript" language="javascript" src="<?= base_url() ?>public/js/jquery.validate.js"></script>
<script src="<?php echo base_url(); ?>public/js/chosen.jquery.min.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>public/js/ajax-chosen.min.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>public/js/validation-custom-text.js" type="text/javascript"></script>
<script type="text/javascript">
    var amountRow=0;
    $(document).ready(function(){
        $(".stock-medal").ajaxChosen({
            method: 'GET',
            url: '<?php echo base_url(); ?>index.php/medal_receipt/medal_list',
            dataType: 'json'
        }, function (data) {
            var terms = {};			
            $.each(data, function (i, val) {
                terms[val.ID] = val.full_name;
            });			
            return terms;
        }); 
        readMedalInStock();
        
        $("#showAll").click(function(event){
            event.preventDefault();
            oTable.fnReloadAjax("<?php echo base_url(); ?>index.php/admin_stock/stock_list");
            readMedalInStock();
        });
        
        $( "#fromdate" ).datepicker({
            onSelect: function(selected) {
                $( "#todate" ).datepicker( "option", "minDate", selected);
            }
        });
        $( "#todate" ).datepicker({
            onSelect: function(selected) {
                $( "#fromdate" ).datepicker( "option", "maxDate", selected);
            }
        });
        var oTable = $('#stock-in-list').dataTable( {
            "bSortClasses": false,
            "bPaginate": true,
            "bLengthChange": true,
            "bFilter": false,
            "bSort": true,
            "bInfo": false,
            "bAutoWidth": true,
            "aoColumnDefs": [ 
                { "bSortable": false, "aTargets": [ 0,4] }
            ],
            "aaSorting": [[ 1, "asc" ]],
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "<?php echo base_url(); ?>index.php/admin_stock/stock_list" ,
            "fnDrawCallback": function() {
                clearStockForm();               
            }
        });
        
        $("#new-stock-add").ajaxForm({
            beforeSubmit: function(){
                validateDefaultText('#new-stock-add input');
                var validate = $('#new-stock-add').validate().form();
                if (validate == false){
                    returnDefaultText('#new-stock-add input');
                    validate.error();
                    return validate; 
                }
                // waitng status
                $('#form-add-stock .loading').show();
                $('#form-add-stock .add-button').addClass('disable-add-button').attr('disabled', 'disabled');
            },
            url: '<?php echo base_url(); ?>index.php/admin_stock/add_stock',
            dataType: 'json',
            error: function (){
                // stop waiting display error
                $('#form-add-stock .err-msg').html("ទិន្នន័យមិនអាចរក្សាទុកបានដោយបញ្ហាបច្ចេកទេស");                
                $('#form-add-stock .loading').hide();
                $('#form-add-stock .add-button').removeClass('disable-add-button').removeAttr('disabled');                
            },
            success: function (data){                
                if (!data.result){
                    $('#form-add-stock .err-msg').html(data.message);
                }else{            
                    $('#form-add-stock .err-msg').html(data.message);
                    readMedalInStock();
                    oTable.fnReloadAjax("<?php echo base_url(); ?>index.php/admin_stock/stock_list");
                }      
                $('#form-add-stock .loading').hide();
                $('#form-add-stock .add-button').removeClass('disable-add-button').removeAttr('disabled');      
            }
        });
        
        $(".plus-amount").click(function(event){
            event.preventDefault();
            amountRow++;
            var row = $("#add-stock-row").clone(true);
            row.find(".plus-button").remove();
            row.find(".minus-button").css("display", "block");
            row.find("#stock_medal_chzn").remove();
            row.addClass("sub");
            row.find(".stock-medal").val("").show().removeClass("chzn-done").removeAttr("style").val("");
            row.removeAttr("id").find("select").attr("name", row.find("select").attr("id")+"["+amountRow+"]");
            row.find("select").attr("id", row.find("select").attr("id")+"_"+amountRow);
            row.find(".stock-amount").attr("name", row.find(".stock-amount").attr("id")+"["+amountRow+"]");       
            row.find(".stock-amount").val("ចំនួន").attr("id", row.find(".stock-amount").attr("id")+"_"+amountRow);       
            row.find(".stock-amount").unbind();       
            
            $("#add-stock-all-row").append(row);
       
            row.find(".stock-medal").ajaxChosen({
                method: 'GET',
                url: '<?php echo base_url(); ?>index.php/medal_receipt/medal_list',
                dataType: 'json'
            }, function (data) {
                var terms = {};			
                $.each(data, function (i, val) {
                    terms[val.ID] = val.full_name;
                });			
                return terms;
            }); 
            
            row.find('.populated-text').each(function () {
                var input = $(this);
                input.data('blank-value', input.val());
                input.data('data-entered', false);
                input.addClass('grayed');
                input.keydown(keyDown);
                input.blur(blur);
                input.focus(focus);
                input.mousedown(mouse);
                input.mouseup(mouse);
            }); 
            
        });
        
        $(".minus-button").live("click", function(){
            $(this).parent().remove();
        });
        
        
        $("#stock-in-list tbody").click(function(event) {
            $(oTable.fnSettings().aoData).each(function (){
                $(this.nTr).removeClass('row_selected');
            });
            $(event.target.parentNode).addClass('row_selected');
            var id = $(event.target.parentNode).find(".id").val();
            readMedalById(id);
        });
    });
    
    function readMedalById(id){
        $.ajax({
            url: "<?php echo base_url(); ?>index.php/admin_stock/medal_in_stock_by_id",
            dataType: "json",
            data: "id="+id,
            success: function(result){
                $.each(result, function(key, val) {
                    $("#stock-detail-panel td span[class='"+ val.Medal_Class_ID +"'][type='"+val.Medal_Type_ID+"']").html(Number(val.amount));
                });
            }
        });    
    }
    
    function readMedalInStock(){
        $.ajax({
            url: "<?php echo base_url(); ?>index.php/admin_stock/medal_in_stock",
            dataType: "json",
            success: function(result){
                $.each(result, function(key, val) {
                    $("#stock-detail-panel td span[class='"+ val.Medal_Class_ID +"'][type='"+val.Medal_Type_ID+"']").html(Number(val.amount));
                });
            }
        });
    }
      
    function clearStockForm(){
        readMedalInStock();
        $("#form-add-stock .err-msg").html("");  
        $("#new-stock-add select").val("").trigger("liszt:updated");  
        $("#new-stock-add #fromdate").val("ពីថ្ងៃទី​​​");  
        $("#new-stock-add #todate").val("ដល់ថ្ងៃទី​​​​");  
        $("#new-stock-add .stock-amount").val("ចំនួន​​​​");  
        $("#add-stock-all-row").find("div.sub").not("#add-stock-row").each(function(){
            $(this).remove()
        });
        $('#new-stock-add .populated-text').each(function () {
            var input = $(this);
            input.data('blank-value', input.val());
            input.data('data-entered', false);
            input.addClass('grayed');
            input.keydown(keyDown);
            input.blur(blur);
            input.focus(focus);
            input.mousedown(mouse);
            input.mouseup(mouse);
        }); 
    }
</script>

<div id="left-content">
    <div id="stock-history-panel" class="content-block">
        <div class="block-header">តារាងប្រវត្តិឃ្លាំង</div>
        <div id="block-content">
            <div id="stock-history-list">
                <table id="stock-in-list" class="no-vertical-border bedatable">
                    <thead>
                        <tr>
                            <th class="index-col">ល.រ</th>
                            <th >​ពីខែឆ្នាំ</th>
                            <th>ដល់ខែឆ្នាំ</th>
                            <th>កាលបរិច្ឆេទ</th>
                            <th align="center" class="blank-header" ></th>
                        </tr>
                    </thead>
                </table>
                <div class="break"></div>
            </div>
            <div class="form-add-panel" id="form-add-stock">
                <div id="title">បញ្ជូលស្តុកថ្មី៖</div>
                <div class="err-msg"></div>
                <div class="loading"><img src="<?php echo base_url(); ?>public/images/forms/loading-bar.gif" /></div>
                <form id="new-stock-add" method="post" name="new-stock-add" autocomplete="off">
                    <input type="text" name="fromdate" id="fromdate" value="ពីថ្ងៃទី​​" class="input text datepicker populated-text required" />
                    <input type="text" name="todate" id="todate" value="ដល់ថ្ងៃទី​" class="input text datepicker populated-text required" />
                    <div id="add-stock-all-row">
                        <div id="add-stock-row">
                            <select id="stock-medal" name="stock-medal[]" class="stock-medal required"/>
                            <option value="" >ប្រភេទ/ថ្នាក់មេដាយ​</option>                  
                            <?php
                            foreach ($medals as $medal):
                                echo "<option value='{$medal['ID']}'>{$medal['full_name']}</option>";
                            endforeach;
                            ?>
                            </select>
                            <input type="text" name="stock-amount[0]" id="stock-amount" value="ចំនួន" class="stock-amount text integer number input required left populated-text" />
                            <input type="submit" value="" class="plus-amount plus-button right" />
                            <input type="submit" value="" class="minus-amount minus-button right" />
                        </div>
                    </div>
                    <div class="break"></div>
                    <input type="submit" id="issue-submit" value="" class="add-button right" />
                </form>
                <div class="break"></div>
            </div>
        </div>
    </div>
    <div id="stock-detail-panel" class="content-block">
        <div class="block-header">ស្តុកលំអិត
            <div class="right"><a href="#" id="showAll">បង្ហាញទាំងអស់</a></div></div>
        <div id="block-content">
            <div>
                <table id="data-table" class="no-vertical-border medal-detail">
                    <tr>
                        <th scope="col">ប្រភេទ</th>
                        <th scope="col">មហាសិរីវឌ្ឍន៌</th>
                        <th scope="col">មហាសេនា</th>
                        <th scope="col">ធិបឌិន្ទុ</th>
                        <th scope="col">សេនា</th>
                        <th scope="col">អស្សរិទ្ធិ</th>
                    </tr>
                    <tr>
                        <th scope="row">ព្រះរាជាណាចក្រកម្ពុជា</th>
                        <td><span class="1" type="1"></span></td>
                        <td><span class="2" type="1"></span></td>
                        <td><span class="3" type="1"></span></td>
                        <td><span class="4" type="1"></span></td>
                        <td><span class="5" type="1"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">សម្តេចព្រះមហាក្សត្រីយានី</th>
                        <td><span class="1" type="2"></span></td>
                        <td><span class="2" type="2"></span></td>
                        <td><span class="3" type="2"></span></td>
                        <td><span class="4" type="2"></span></td>
                        <td><span class="5" type="2"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">សុវត្ថារា</th>
                        <td><span class="1" type="3"></span></td>
                        <td><span class="2" type="3"></span></td>
                        <td><span class="3" type="3"></span></td>
                        <td><span class="4" type="3"></span></td>
                        <td><span class="5" type="3"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">មុនីសារ៉ាភ័ណ្ឌ</th>
                        <td><span class="1" type="4"></span></td>
                        <td><span class="2" type="4"></span></td>
                        <td><span class="3" type="4"></span></td>
                        <td><span class="4" type="4"></span></td>
                        <td><span class="5" type="4"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">សហមេត្រី</th>
                        <td><span class="1" type="5"></span></td>
                        <td><span class="2" type="5"></span></td>
                        <td><span class="3" type="5"></span></td>
                        <td><span class="4" type="5"></span></td>
                        <td><span class="5" type="5"></span></td>
                    </tr>
                </table>
            </div>
            <div>
                <table id="data-table" class="no-vertical-border">
                    <tr>
                        <th scope="col">ប្រភេទ</th>
                        <th scope="col">មាស</th>
                        <th scope="col">ប្រាក់</th>
                        <th scope="col">សំរឹទ្ធ</th>
                    </tr>
                    <tr>
                        <th scope="row">ការពារជាតិ</th>
                        <td><span class="6" type="6"></span></td>
                        <td><span class="7" type="6"></span></td>
                        <td><span class="8" type="6"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">ការងារ</th>
                        <td><span class="6" type="7"></span></td>
                        <td><span class="7" type="7"></span></td>
                        <td><span class="8" type="7"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">ស្ថាបនាជាតិ</th>
                        <td><span class="6" type="8"></span></td>
                        <td><span class="7" type="8"></span></td>
                        <td><span class="8" type="8"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">ស្ត្រីវឌ្ឍនា</th>
                        <td><span class="6" type="9"></span></td>
                        <td><span class="7" type="9"></span></td>
                        <td><span class="8" type="9"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">ខេមរាកីឡារិទ្ធិ</th>
                        <td><span class="6" type="10"></span></td>
                        <td><span class="7" type="10"></span></td>
                        <td><span class="8" type="10"></span></td>
                    </tr>
                </table>
            </div>
            <div>
                <table id="data-table" class="no-vertical-border">
                    <tr>
                        <th scope="col">ប្រភេទ</th>
                        <th scope="col">&nbsp;</th>
                    </tr>
                    <tr>
                        <th scope="row">ជាតូបការ</th>
                        <td><span class="null" type="11"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">ឯករាជ្យជាតិ</th>
                        <td><span class="null" type="12"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">សេនាជ័យសិទ្ធ</th>
                        <td><span class="null" type="13"></span></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<!--<div id="related-activity" class="content-block right">
  <div class="block-header">ប្រតិបត្តិសំខាន់ៗ</div>
  <div id="block-content"></div>
</div>-->
